<template>
  <el-card>
    <el-button size="small" type="success" @click="btnAdd" v-auth="'system-menu-add'">
      <el-icon>
        <ele-FolderAdd/>
      </el-icon>
      添加
    </el-button>
    <el-table
        v-loading="loding"
        :data="menuListData"
        style="width: 100%; margin-bottom: 20px"
        row-key="menuId"
    >
      <el-table-column  label="名称"  prop="title" width="240px"/>
      <el-table-column  label="图标"  prop="icon" align="center" width="180px">
        <template #default="scope">
         <!--这里设置图标-->
          <SvgIcon :name="scope.row.icon"></SvgIcon>
        </template>
      </el-table-column>
      <el-table-column  label="排序"  prop="orderNum" align="center" width="60px"/>
      <el-table-column  label="权限标识"  prop="perms" align="center" width="240px"/>
      <el-table-column  label="组件路径"  prop="component" align="center" width="240px"/>
      <el-table-column  label="创建时间"  prop="createTime" align="center" width="180px"/>
      <el-table-column  label="操作" align="center"  v-auths="['system-menu-add','system-menu-update','system-menu-delete']">
        <template #default="scope">
          <el-link size="small" type="success" title="添加"  @click="btnAdd(scope.row)" v-auth="'system-menu-add'">
            <el-icon>
              <ele-Plus/>
            </el-icon>
          </el-link>
          <el-link type="primary" title="修改" class="ml10" @click="signUpdateBtn(scope.row)" v-auth="'system-menu-update'">
            <el-icon>
              <ele-EditPen/>
            </el-icon>
          </el-link>
          <el-popconfirm title="确定删除吗？" @confirm="deleteRows(scope.row)">
            <template #reference>
              <el-link type="danger" title="删除" class="ml10" v-auth="'system-menu-delete'">
                <el-icon>
                  <ele-Delete/>
                </el-icon>
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>
    <edit-form :menu-list="menuList" ref="editRef" @ok="ok"></edit-form>
  </el-card>
</template>

<script setup>
import EditForm from './EditForm.vue'
import {treeForManage,deleteById} from "/@/api/system/menu";
import {ElMessage} from "element-plus";
const {proxy} = getCurrentInstance()
const menuList = ref([{
  menuId:'0',
  title:'主目录',
  children:[],
}])

const menuListData=ref([])
const loding = ref(true)
const getList =()=> {
  loding.value=true
  treeForManage().then(res =>{
    (menuList.value[0]).children=res.data
    menuListData.value=res.data
    loding.value=false
    // menuList.value = res.data
  })
}

//状态选项字典
const stateOptions = ref([])
const queryOptions=()=>{
  proxy.$dictOptions('sys_common_status').then(res => {
    stateOptions.value = res.data
  })
}

const deleteRows=(node)=> {
  deleteById(node.menuId).then(res => {
    ElMessage.success(res.msg)
    getList()
  })
}
const editRef = ref()
const btnAdd=(node)=>{
  if(node){
    editRef.value.open(node)
  }
  editRef.value.open()
}
const signUpdateBtn=(node)=>{
  editRef.value.openUpdate(node)
}


const ok=()=>{
  getList()
}
onBeforeMount(()=>{
  queryOptions()
  getList()
})



</script>

<style scoped>

</style>
